<template>
  <div id="Nav" :style="isDark?'background-color:rgb(34,33,38);color:#999':''">
    <van-tabs @click="tabClick" :class="isDark?'Dark':''" :color="subjectColor">
      <van-tab
        v-for="(item, index) in tabTitle"
        :key="index"
        :title="item"
        :name="index"
      >
        <scroll
          class="content"
          ref="scroll"
          :probeType="3"
          @scroll="contentScroll"
          :pull-up-load="true"
          @pullingUp="loadMore"
        >
          <NewsList :newsList="newsShow"></NewsList>
        </scroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import "vant/lib/index.css";
import Scroll from "./Scroll";
import NewsList from "./newsList/NewList";
import {mapState} from 'vuex'
import { getNewsList } from "../api/getNewsList";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "Nav",
  components: {
    Scroll,
    NewsList,
  },
  mounted() {
  },
  data() {
    return {
      // 导航栏标签
      tabTitle: [
        "推荐",
        "热点",
        "社会",
        "娱乐",
        "科技",
        "军事",
        "体育",
        "汽车",
        "财经",
        "国际",
        "时尚",
        "旅游",
        "探索",
        "育儿",
        "养生",
        "故事",
        "美文",
        "游戏",
        "历史",
        "美食",
      ],
      // 当前导航栏的分类
      currentType: "__all__",
      // 不同频道的新闻数据
      news: {
        __all__: { list: [] },
        news_hot: { list: [] },
        news_society: { list: [] },
        news_entertainment: { list: [] },
        news_tech: { list: [] },
        news_military: { list: [] },
        news_sports: { list: [] },
        news_car: { list: [] },
        news_finance: { list: [] },
        news_world: { list: [] },
        news_fashion: { list: [] },
        news_travel: { list: [] },
        news_discovery: { list: [] },
        news_baby: { list: [] },
        news_regimen: { list: [] },
        news_story: { list: [] },
        news_essay: { list: [] },
        news_game: { list: [] },
        news_history: { list: [] },
        news_food: { list: [] },
      },
      saveY: 0,
    };
  },
  computed: {
    newsShow() {
      return this.news[this.currentType].list;
    },
    ...mapState(['isDark','subjectColor'])
  },
  created() {
    getNewsList("__all__").then((res) => {
      this.news["__all__"].list.push(...res.data);
    });
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
  },
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
  },
  methods: {
    // 导航栏事件监听，改变相应的currentType的值
    tabClick(name, title) {
      switch (title) {
        case "推荐":
          this.currentType = "__all__";
          break;
        case "热点":
          this.currentType = "news_hot";
          break;
        case "社会":
          this.currentType = "news_society";
          break;
        case "娱乐":
          this.currentType = "news_entertainment";
          break;
        case "科技":
          this.currentType = "news_tech";
          break;
        case "军事":
          this.currentType = "news_military";
          break;
        case "体育":
          this.currentType = "news_sports";
          break;
        case "汽车":
          this.currentType = "news_car";
          break;
        case "财经":
          this.currentType = "news_finance";
          break;
        case "国际":
          this.currentType = "news_world";
          break;
        case "时尚":
          this.currentType = "news_fashion";
          break;
        case "旅游":
          this.currentType = "news_travel";
          break;
        case "探索":
          this.currentType = "news_discovery";
          break;
        case "育儿":
          this.currentType = "news_baby";
          break;
        case "养生":
          this.currentType = "news_regimen";
          break;
        case "故事":
          this.currentType = "news_story";
          break;
        case "美文":
          this.currentType = "news_essay";
          break;
        case "游戏":
          this.currentType = "news_game";
          break;
        case "历史":
          this.currentType = "news_history";
          break;
        case "美食":
          this.currentType = "news_food";
      }
      this.getNewsList();
    },
    // 向上滚动加载更多
    loadMore() {
      this.getNewsList();
    },
    contentScroll() {},
    // 请求新闻数据
    getNewsList() {
      getNewsList(this.currentType)
        .then((res) => {
          let data = res.data.filter((item) => {
            return item.label !== '置顶'
          })
          this.news[this.currentType].list.push(...data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="less">
#Nav {
  height: 93vh;
  overflow: scroll;
  margin-top:3rem ;
}

.van-tabs--line .van-tabs__wrap {
  z-index: 2;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 86vh;
  overflow: hidden;
}

.van-tab__pane {
  overflow: hidden;
}

.Dark{
  background-color: rgb(52,55,64)!important;
  /deep/.van-tabs__nav{
    background-color: rgb(52,55,64)!important;
  }
  /deep/.van-tab span{
    color: #fff;
  }
  /deep/.van-tabs__line{
    background: #fff!important;
  }
}
</style>
